<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<div class="header">
		<div class="icon">
			<div class="large">
				<div class="small"></div>
			</div>
		</div>

		<div class="right">
			<div class="search">
				<img src="icons/search.png" alt="">
				<input type="text">
			</div>
			<div class="login">
				<a href="#">
					<img src="icons/login.png" alt="">
					登录
				</a>
			</div>
		</div>	
	</div>

	<div class="body">
		<div class="sidebar">
			<div class="title">
				<span class="icon large">
					<span class="small"></span>
				</span>
				<span class="name">Jaakko</span>
			</div>
			<div class="info">
				<div class="left">
					<p>110</p>
					<p>收藏</p>
				</div>
				<div class="right">
					<p>313</p>
					<p>粉丝</p>
				</div>
			</div>

			<div class="menu">
				<ol>
					<li class="p_report">
						<input type="checkbox" id="p_report_box"/>
						<label id="p_report_title" for="p_report_box">个人报表</label>
						<ol class="p_report_item">
							<li class="file one">
								<input type="checkbox" id="file_one">
								<label for="file_one">文件一</label>
								<ol>
									<li>文档1</li>
									<li>文档2</li>
									<li>文档3</li>
								</ol>
							</li>
							<li class="file two">文件二</li>
							<li class="file three">文件三</li>
						</ol>
					</li>
					<li class="p_collection">个人收藏</li>
					<li>我的分享</li>
					<li>图库</li>
					<li>成长记录</li>
					<li>账户信息</li>
				</ol>
			</div>
		</div>

		<div class="main">
			<div class="path">
				<p>
					C站&nbsp;&nbsp;/&nbsp;&nbsp;个人报表&nbsp;&nbsp;/&nbsp;&nbsp;文件一&nbsp;&nbsp;/&nbsp;&nbsp;<span>文档一</span>
				</p>
			</div>

			<div class="content">
				<div class="search">
					<table>
						<tr>
							<td class="title">
								查询项
							</td>
							<td>
								<select name="" id="number" class="half">
									<option value ="first" selected="selected">第一项</option>
								</select>
							</td>
							<td class="title">
								买方
							</td>
							<td>
								<select name="" id="buyer">
									<option value="">小A</option>
								</select>
							</td>
							<td rowspan="2" class="pic">
								<img src="imgs/exchange.gif" alt="">
							</td>
							<td class="title">
								日期
							</td>
							<td colspan="2">
								<input type="text" placeholder="2018-02-04">
							</td>
							<td class="title align-left">
								总耗时
							</td>
							<td>
								<select name="" id="" class="half">
									<option value="">8天</option>
								</select>
							</td>
							<td rowspan="2">
								<input type="button" value="搜索">
							</td>
						</tr>
						<tr>
							<td></td>
							<td></td>
							<td class="title">
								卖方
							</td>
							<td>
								<select name="" id="seller">
									<option value="">小C</option>
								</select>
							</td>
							<td class="title">
								人数
							</td>
							<td>
								<select name="" id="p-num" class="half">
									<option value="">10人</option>
								</select>	
							</td>
							<td class="title align-right">
								成交项
							</td>
							<td colspan="2">
								<select name="" id="">
									<option value="">10项</option>
								</select>
							</td>
						</tr>
					</table>
				</div>

				<div class="price">
					<div class="short first left"></div>
					<div class="long first_info">
						<div>
							<p>10:00&nbsp;am</p>
							<p class="orange"><span>￥</span>1200</p>
						</div>
					</div>
					<div class="long">
						<div>
							<p>11:00&nbsp;am</p>
							<p class="orange"><span>￥</span>1300</p>
						</div>
					</div>
					<div class="long">
						<div>
							<p>12:00&nbsp;am</p>
							<p class="orange"><span>￥</span>1200</p>
						</div>
					</div>
					<div class="long">
						<div>
							<p>01:00&nbsp;pm</p>
							<p class="orange"><span>￥</span>1400</p>
						</div>
					</div>
					<div class="long">
						<div>
							<p>02:00&nbsp;pm</p>
							<p class="orange"><span>￥</span>1500</p>
						</div>
					</div>
					<div class="long">
						<div>
							<p>03:00&nbsp;pm</p>
							<p class="orange"><span>￥</span>1800</p>
						</div>
					</div>
					<div class="short right"></div>
					<div class="long active">
						<p>历史查询</p>
					</div>
				</div>
  
				<div class="count">
					<p class="title">2016年4月份统计</p>
					<div class="count_content">
						<div class="number color_1">
							<div class="left">
								<p>13111</p>
								<br>
								<p class="info">成交量</p>
							</div>
							<div class="right"></div>
						</div>
						<div class="number color_2">
							<div class="left">
								<p>13111</p>
								<br>
								<p class="info">成交量</p>
							</div>
							<div class="right"></div>
						</div>
						<div class="number color_3">
							<div class="left">
								<p>13111</p>
								<br>
								<p class="info">成交量</p>
							</div>
							<div class="right"></div>
						</div>
						<div class="number color_4">
							<div class="left">
								<p>13111</p>
								<br>
								<p class="info">成交量</p>
							</div>
							<div class="right"></div>
						</div>
					</div>
				</div>

				<div class="project">
					<div class="left">
						<div class="title">
							<p>第一组项目</p>
						</div>
						<div class="content">
							<div class="tab">
								<div class="tab_item active">项目一</div>
								<div class="tab_item">项目一</div>
								<div class="tab_item">项目一</div>
								<div class="tab_item">项目一</div>
								<div class="tab_item">项目一</div>
							</div>
							<div class="content">
								<table>
									<tr>
										<td class="ac">购买材料1</td>
										<td>购买材料2</td>
										<td>购买材料3</td>
										<td>购买材料4</td>
									</tr>
									<tr>
										<td>购买材料1</td>
										<td>购买材料2</td>
										<td>购买材料3</td>
										<td>购买材料4</td>
									</tr>
									<tr>
										<td>购买材料1</td>
										<td>购买材料2</td>
										<td>购买材料3</td>
										<td>购买材料4</td>
									</tr>
									<tr>
										<td>购买材料1</td>
										<td>购买材料2</td>
										<td>购买材料3</td>
										<td>购买材料4</td>
									</tr>
									<tr>
										<td>购买材料1</td>
										<td>购买材料2</td>
										<td>购买材料3</td>
										<td>购买材料4</td>
									</tr>
									<tr>
										<td>购买材料1</td>
										<td>购买材料2</td>
										<td>购买材料3</td>
										<td>购买材料4</td>
									</tr>
								</table>
							</div>
						</div>
					</div>
					<div class="right">
						<div class="title">
							<p>第一组项目</p>
						</div>
						<div class="content">
							<div class="title">
								<p class="captoin">标题</p>
								<p>项目报表三</p>
							</div>
							<div class="agent">
								<div class="left">
									<p class="captoin">价格</p>
									<p>￥158</p>
								</div>
								<div class="right">
									<p class="captoin">负责人</p>
									<p>小A</p>
								</div>
							</div>
							<div class="detail">
								<p class="captoin">详细描述</p>
								<p>该项目目前的负责人是......</p>
							</div>
							<div class="submit">
								<input type="checkbox" id="agree">
								<label for="agree" class="captoin">遵守保密协议</label>
								<input type="button" value="搜索">
							</div>
							
						</div>
					</div>
				</div>

				<div class="last">
					<div class="calendar">
						<div class="title">日历</div>
						<div class="content">
							<div class="select">
								<select name="" id="" class="year">
									<option>2016年</option>
								</select>
								<select name="" id="" class="month">
									<option>4月</option>
								</select>
								<select name="" id="" class="day">
									<option>标注日期</option>
								</select>
								<input type="button" value="返回今天" class="return">
							</div>
							<div class="week">
								<table>
									<tr class="caption">
										<td>一</td>
										<td>二</td>
										<td>三</td>
										<td>四</td>
										<td>五</td>
										<td>六</td>
										<td>日</td>
									</tr>
									<tr>
										<td></td>
										<td></td>
										<td></td>
										<td></td>
										<td>
											<p>1</p>
											<p class="color">愚人节</p>
										</td>
										<td>
											<p class="color">2</p>
											<p>廿五</p>
										</td>
										<td>
											<p class="color">3</p>
											<p>廿六</p>
										</td>
									</tr>
									<tr>
										<td>
											<p>4</p>
											<p>廿七</p>
										</td>
										<td>
											<p>5</p>
											<p class="color">清明</p>
										</td>
										<td>
											<p>6</p>
											<p>廿九</p>
										</td>
										<td>
											<p>7</p>
											<p>三月</p>
										</td>
										<td>
											<p>8</p>
											<p>初二</p>
										</td>
										<td class="selected">
											<p class="color">9</p>
											<p>初三</p>
										</td>
										<td>
											<p class="color">10</p>
											<p>初四</p>
										</td>
									</tr>
									<tr>
										<td>
											<p>11</p>
											<p>初五</p>
										</td>
										<td class="selected">
											<p>12</p>
											<p>初六</p>
										</td>
										<td>
											<p>13</p>
											<p>初七</p>
										</td>
										<td>
											<p>14</p>
											<p>初八</p>
										</td>
										<td>
											<p>15</p>
											<p>初九</p>
										</td>
										<td>
											<p class="color">16</p>
											<p>初十</p>
										</td>
										<td>
											<p class="color">17</p>
											<p>十一</p>
										</td>
									</tr>
									<tr>
										<td>
											<p>18</p>
											<p>十二</p>
										</td>
										<td class="selected">
											<p>19</p>
											<p class="color">十三</p>
										</td>
										<td>
											<p>20</p>
											<p>十四</p>
										</td>
										<td>
											<p>21</p>
											<p>十五</p>
										</td>
										<td>
											<p>22</p>
											<p>十六</p>
										</td>
										<td>
											<p class="color">23</p>
											<p>十七</p>
										</td>
										<td>
											<p class="color">24</p>
											<p>十八</p>
										</td>
									</tr>
									<tr>
										<td>
											<p>25</p>
											<p>十九</p>
										</td>
										<td>
											<p>26</p>
											<p>廿十</p>
										</td>
										<td>
											<p>27</p>
											<p>廿一</p>
										</td>
										<td>
											<p>28</p>
											<p>廿二</p>
										</td>
										<td>
											<p>29</p>
											<p>廿三</p>
										</td>
										<td>
											<p class="color">30</p>
											<p>廿四</p>
										</td>
										<td></td>
									</tr>
								</table>
							</div>
						</div>
					</div>
					<div class="ranking">
						<div class="title">汽车销售品牌</div>
						<div class="content">
							<table>
								<tr>
									<td class="first title">排名</td>
									<td class="second title">品牌</td>
									<td class="third title">搜索指数</td>
								</tr>
								<tr>
									<td class="first">1</td>
									<td class="second">大众</td>
									<td class="third">
										<span>48912001</span>
										<div class="progress_bar">
											<div class="rate one"></div>
										</div>
									</td>
								</tr>
								<tr>
									<td class="first">2</td>
									<td class="second">大众</td>
									<td class="third">
										<span>48912001</span>
										<div class="progress_bar">
											<div class="rate two"></div>
										</div>
									</td>
								</tr>
								<tr>
									<td class="first">3</td>
									<td class="second">大众</td>
									<td class="third">
										<span>48912001</span>
										<div class="progress_bar">
											<div class="rate three"></div>
										</div>
									</td>
								</tr>
								<tr>
									<td class="first">4</td>
									<td class="second">大众</td>
									<td class="third">
										<span>48912001</span>
										<div class="progress_bar">
											<div class="rate four"></div>
										</div>
									</td>
								</tr>
								<tr>
									<td class="first">5</td>
									<td class="second">大众</td>
									<td class="third">
										<span>48912001</span>
										<div class="progress_bar">
											<div class="rate five"></div>
										</div>
									</td>
								</tr>
								<tr>
									<td class="first">6</td>
									<td class="second">大众</td>
									<td class="third">
										<span>48912001</span>
										<div class="progress_bar">
											<div class="rate six"></div>
										</div>
									</td>
								</tr>
								<tr>
									<td class="first">7</td>
									<td class="second">大众</td>
									<td class="third">
										<span>48912001</span>
										<div class="progress_bar">
											<div class="rate seven"></div>
										</div>
									</td>
								</tr>
								<tr>
									<td class="first">8</td>
									<td class="second">大众</td>
									<td class="third">
										<span>48912001</span>
										<div class="progress_bar">
											<div class="rate eight"></div>
										</div>
									</td>
								</tr>
								<tr>
									<td class="first">9</td>
									<td class="second">大众</td>
									<td class="third">
										<span>48912001</span>
										<div class="progress_bar">
											<div class="rate nine"></div>
										</div>
									</td>
								</tr>
								<tr>
									<td class="first">10</td>
									<td class="second">大众</td>
									<td class="third">
										<span>48912001</span>
										<div class="progress_bar">
											<div class="rate ten"></div>
										</div>
									</td>
								</tr>
							</table>
						</div>
					</div>
				</div>

			</div>
		</div>

	</div>
</body>
</html>